<html>    
  <head> 
    <script type="text/javascript" src="js/jquery-1.6.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>        
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="js/gmap3.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.12.custom.css"/>
    <style>
      *{
        font-family: verdana;
        font-size: 12px;
      }
      body{
        text-align:center;
      }
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 1000px;
        height: 500px;
      }
      .ui-menu .ui-menu-item{
        text-align: left;  
        font-weight: normal;
      }
      .ui-menu .ui-menu-item a.ui-state-hover{
        border: 1px solid red; 
        background: #FFBFBF; 
        color: black;
        font-weight:bold;
      }
    </style>
    
    <script type="text/javascript">
      $(function(){
          
          $("#test").gmap3();

          $('#address').autocomplete({
            //This bit uses the geocoder to fetch address values
            source: function(request, response) {
              $("#test").gmap3({
                action:'getAddress',
                address: request.term,
                callback:function(results){
                  if (!results) return;
                  response($.map(results, function(item) {
                    return {
                      label:  item.formatted_address,
                      value: item.formatted_address,
                      latLng: item.geometry.location
                    }
                  }));
                }
              });
            },
            //This bit is executed upon selection of an address
            select: function(event, ui) {
              $("#test").gmap3(
                {action:'clear', name:'marker'},
                {action:'addMarker',
                  latLng:ui.item.latLng,
                  map:{center:true}
                }
              );
            }
          });
          
      });
    </script>
  <body>
    <input type="text" id="address" size="60">
    <div id="test" class="gmap3"></div>
  </body>
</html>